<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

<fieldset style="width:400px">
      <form action="<%=request.getContextPath()%>/CommonServlet?command=update&id=${sysUser.id}" method="post">
      <table>
     <tr>
         <th>账号</th>
         <td>${sysUser.code }<input type="hidden"  name="code"  value="${sysUser.code }"> </td>
      </tr>
       <tr>
         <th>姓名：</th>
         <td>${sysUser.name }<input type="hidden"  name="name"  value="${sysUser.name }"> </td>
      </tr>
       <tr>
         <th>性别：</th>
         <td>${sysUser.sexStr }<input type="hidden"  name="sex"  value="${sysUser.sexStr }"> </td>
      </tr>
       <tr>
          <th>电话：</th>
          <td><input type="text" id="phone" name="phone"  value="${sysUser.phone }" onblur="validatePhone(this)"><span id="phoneInfo"></span> </td>
	  </tr>
	  
	   <tr>
          <th>邮箱：</th>
          <td><input type="text" id="email" name="email"  value="${sysUser.email }" onblur="validateEmail(this)" /><span id="emailInfo"></span></td>
	  </tr>
	   <tr>
          <th>创建时间：</th>
          <td>${sysUser.createTime }<input type="hidden"  name="create_time"  value="${sysUser.createTime }"> </td>
	  </tr>
	     <tr>
          <th>所属角色：</th>
          <td>${sysUser.roleName }<input type="hidden"  name="role_name"  value="${sysUser.roleName }"> </td>
	  </tr>
	   <tr>
					<td>
						<input type="submit" value="提交"  id="submit"/>
					</td>
				</tr>
      </table>
      </form>
      </fieldset>
     <script>
     function validateEmail(email)  {
		var email = document.getElementById("email").value;
		if(email == ''){
			return;
		}
		var emailInfoDOM = document.getElementById("emailInfo");
		
			//1,创建XMLHttpRwquest对象
			var xmlhttp;
			if(window.XMLHttpRequest){
				xmlhttp = new XMLHttpRequest();
			}else{
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			//2.指定XMLhttpRequest的到达地址及到达方式 
			xmlhttp.open("post","<%=request.getContextPath()%>/CommonServlet?command=verificationEmail&email="+ email,true);
			//3.XMLhttpRequest发送
			xmlhttp.send();
			//4.响应结果
			xmlhttp.onreadystatechange = function(){
		  if (xmlhttp.readyState==4 && xmlhttp.status==200){
			  var submitDOM = document.getElementById('submit');
			  if(xmlhttp.responseText == 1){
				 emailInfoDOM.innerHTML= "<font color='red'>邮箱已经存在</font>";
				 submitDOM.disabled = true;
			  }
			  else{
				  emailInfoDOM.innerHTML="<font color='green'>邮箱可以使用</font>";
				    submitDOM.disabled =false; 
			  }
		  }
		}
     }
     </script>
     
       <script>
     function validatePhone(phone)  {
		var phone = document.getElementById("phone").value;
		if(phone == ''){
			return;
		}
		var phoneInfoDOM = document.getElementById("phoneInfo");
		
			//1,创建XMLHttpRwquest对象
			var xmlhttp;
			if(window.XMLHttpRequest){
				xmlhttp = new XMLHttpRequest();
			}else{
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			//2.指定XMLhttpRequest的到达地址及到达方式 
			xmlhttp.open("post","<%=request.getContextPath()%>/CommonServlet?command=verificationPhone&phone="+ phone,true);
			//3.XMLhttpRequest发送
			xmlhttp.send();
			//4.响应结果
			xmlhttp.onreadystatechange = function(){
		  if (xmlhttp.readyState==4 && xmlhttp.status==200){
			  var submitDOM = document.getElementById('submit');
			  if(xmlhttp.responseText == 1){
				 phoneInfoDOM.innerHTML= "<font color='red'>电话已经存在</font>";
				 submitDOM.disabled = true;
			  }
			  else{
				 phoneInfoDOM.innerHTML="<font color='green'>电话可以使用</font>";
				    submitDOM.disabled =false; 
			  }
		  }
		}
     }
     </script>
     
</body>
</html>